<script>
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { useCounterStore } from '../stores'

export default defineComponent({
    setup() {
        const {proxy}=getCurrentInstance()
        const statuss=ref(0)
        const store=useCounterStore()
        const userName=ref(sessionStorage.getItem('userName'))
        const statusCount=ref(0)
        const messageArray=ref([])
        const activeName = ref('1')
        const messageList=()=>{
            let status=0
            proxy.$http.get(`/system/user/get/${userName.value}`)
            .then(res=>{
                proxy.$http.get(`system/msg/user/${res.data[0].userId}`)
                .then(res=>{
                    messageArray.value=res.data
                    for(var i=0;i<res.data.length;i++){
                        if(res.data[i].status===0){
                            status++
                        }
                    }
                    store.setStatuCount(status)
                    
                })
            })
            
            
        }
        const editStatu=(data)=>{
          proxy.$http.put(`system/msg/`,{
            'msgId':data,
            'status':1
          }).then(res=>{
            messageList()
          })
        }
        messageList()
        return{
            userName,
            statuss,
            messageArray,
            messageList,
            statusCount,
            activeName,
            editStatu
        }
    },
})

</script>

<template>
    <div class="demo-collapse">
      <div v-if="messageArray.length==0">
        <h1>您尚未有新的消息</h1>
      </div>
    <el-collapse v-model="activeName" accordion v-for="(item,i) in messageArray" :key="i" v-else>
      <div>
        <el-badge :is-dot="item.status!=1" class="item"></el-badge>
      </div>
      <el-collapse-item :title="`新消息`+(i+1)" :name="i" @click="editStatu(item.msgId)">
        <div>
          {{ item.content }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped>
.item {
  position: absolute;
  right: 60px ;
}
</style>
